<template>
    <div>
        <TopNav :obj="obj"></TopNav>
        <div class="form_box">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="测量名称" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="测量单位" prop="unit">
                    <el-input v-model="ruleForm.unit"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="add">确认</el-button>
                    <el-button @click="reset">取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script lang="ts">
import TopNav from '@/components/TopNav.vue';
import { $AddType, $TypeDetail, $EditType } from "@/api"
import { defineComponent, onMounted, reactive, toRefs } from 'vue';
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';
export default defineComponent({
    name: 'AddType',
    components: { TopNav },
    setup() {
        const route = useRoute()
        const router = useRouter()
        const Data = reactive({
            obj: {
                path: '测试类型',
                title: '添加测试类型',
                msg: '可添加当前组织的子账号，并给其分配权限。'
            },
            ruleForm: {
                name: '',
                unit: ''
            }
        })
        onMounted(() => {
            if (route.query.id) {
                Data.obj.title = '修改测试类型'
                $TypeDetail({ id: route.query.id }).then(res => {
                    Data.ruleForm = res.data.data
                })
            }
        })
        const add = () => {
            if (route.query.id) {
                $EditType({ id: route.query.id, ...Data.ruleForm }).then(res => {
                    if (res.data.msg == "success") {
                        ElMessage({
                            message: '修改成功！',
                            type: 'success',
                        })
                    }
                })
            } else {
                $AddType(Data.ruleForm).then(res => {
                    if (res.data.msg == 'success') {
                        ElMessage({
                            message: '添加成功！',
                            type: 'success',
                        })
                    }
                })
            }
            router.push('/measure/typelist')
        }
        const reset = () => {
            console.log('删除')
        }

        return { ...toRefs(Data), add, reset }
    }
});
</script>

<style lang="less" scoped>
.form_box {
    background: #fff;
    padding: 30px;

    .el-form {
        width: 400px;
    }
}
</style>